<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="crud.cancelCU"
    :visible="crud.status.cu > 0"
    :title="crud.status.title + (crud.status.add !== 0 ? '（可临时保存）': '')"
    top="2vh"
    width="900px"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-width="120px"
    >
      <el-form-item
        label="合同编号"
        prop="contractCode"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.contractCode"
        />
      </el-form-item>
      <el-form-item
        label="是否已归档"
        prop="isArchived"
        style="width: 48%; display: inline-block;"
      >
        <el-radio
          v-for="item in isArchivedOptions"
          :key="item.key"
          v-model="form.isArchived"
          :label="item.key === 'true'"
        >
          {{ item.display_name }}
        </el-radio>
      </el-form-item>
      <el-form-item
        label="项目名称"
        prop="projectName"
        style="width: 96%;"
      >
        <el-input
          v-model="form.projectName"
        />
      </el-form-item>
      <el-form-item
        label="委托单位"
        prop="projectEntrustedCompany"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.projectEntrustedCompany"
        />
      </el-form-item>
      <el-form-item
        label="项目区域"
        prop="projectAddressId"
        style="width: 48%; display: inline-block;"
      >
        <el-select v-model="form.projectAddressId" filterable clearable style="width: 100%;">
          <el-option v-for="item in dict.projectAddressId" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="项目地点"
        prop="projectAddress"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.projectAddress"
        />
      </el-form-item>
      <el-form-item
        label="项目类型"
        prop="projectType"
        style="width: 48%; display: inline-block;"
      >
        <el-select v-model="form.projectType" filterable clearable style="width: 100%;">
          <el-option v-for="item in dict.projectType" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="项目来源"
        prop="projectSource"
        style="width: 48%; display: inline-block;"
      >
        <el-select v-model="form.projectSource" clearable style="width: 100%;">
          <el-option v-for="item in dict.projectSource" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="承接部门"
        prop="undertakeDepartment"
        style="width: 48%; display: inline-block;"
      >
        <el-select v-model="form.undertakeDepartment" filterable clearable style="width: 100%;">
          <el-option v-for="item in dict.undertakeDepartment" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="项目负责人"
        prop="projectLeader"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.projectLeader"
        />
      </el-form-item>
      <el-form-item
        label="项目主要成员"
        prop="projectMainMember"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.projectMainMember"
        />
      </el-form-item>
      <el-form-item
        label="项目辅助成员"
        prop="projectAssistMember"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.projectAssistMember"
        />
      </el-form-item>
      <el-form-item
        label="开始时间"
        prop="projectStartTime"
        style="width: 48%; display: inline-block;"
      >
        <el-date-picker
          v-model="form.projectStartTime"
          type="date"
          value-format="yyyy-MM-dd"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item
        label="结束时间"
        prop="projectFinishTime"
        style="width: 48%; display: inline-block;"
      >
        <el-date-picker
          v-model="form.projectFinishTime"
          type="date"
          value-format="yyyy-MM-dd"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item
        label="项目描述"
        prop="projectDesc"
        style="width: 96%;"
      >
        <el-input
          v-model="form.projectDesc"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <el-form-item
        label="项目完成进度"
        prop="projectFinishedRatio"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.projectFinishedRatio"
        />
      </el-form-item>
      <el-form-item
        label="单价"
        prop="unitPrice"
        style="width: 48%; display: inline-block;"
      >
        <el-input-number
          v-model="form.unitPrice"
          :precision="2"
          :min="0"
          style="width: 66%;"
        />
      </el-form-item>
      <el-form-item
        label="合同金额"
        prop="contractAmount"
        style="width: 48%; display: inline-block;"
      >
        <el-input-number
          v-model="form.contractAmount"
          :precision="2"
          :min="0"
          style="width: 66%;"
        />
      </el-form-item>
      <el-form-item
        label="决算金额"
        prop="finalAmount"
        style="width: 48%; display: inline-block;"
      >
        <el-input-number
          v-model="form.finalAmount"
          :precision="2"
          :min="0"
          style="width: 66%;"
        />
      </el-form-item>
      <el-form-item
        label="开票金额"
        prop="invoiceAmount"
        style="width: 48%; display: inline-block;"
      >
        <el-input-number
          v-model="form.invoiceAmount"
          :precision="2"
          :min="0"
          style="width: 66%;"
        />
      </el-form-item>
      <el-form-item
        label="开票时间"
        prop="invoiceTimestamp"
        style="width: 48%; display: inline-block;"
      >
        <el-date-picker
          v-model="form.invoiceTimestamp"
          type="date"
          value-format="yyyy-MM-dd"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item
        label="是否已开票"
        prop="invoiceStatus"
        style="width: 48%; display: inline-block;"
      >
        <el-radio
          v-for="item in invoiceStatusOptions"
          :key="item.key"
          v-model="form.invoiceStatus"
          :label="item.key"
        >
          {{ item.display_name }}
        </el-radio>
      </el-form-item>
      <el-form-item
        label="到账金额"
        prop="receivedAmount"
        style="width: 48%; display: inline-block;"
      >
        <el-input-number
          v-model="form.receivedAmount"
          :precision="2"
          :min="0"
          style="width: 66%;"
        />
      </el-form-item>
      <el-form-item
        label="到账时间"
        prop="receivedTimestamp"
        style="width: 48%; display: inline-block;"
      >
        <el-date-picker
          v-model="form.receivedTimestamp"
          type="date"
          value-format="yyyy-MM-dd"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item
        label="剩余尾款"
        prop="remainBalance"
        style="width: 48%; display: inline-block;"
      >
        <el-input-number
          v-model="form.remainBalance"
          :precision="2"
          :min="0"
          style="width: 66%;"
        />
      </el-form-item>
      <el-form-item
        label="备注"
        prop="remark"
        style="width: 96%;"
      >
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <div class="content-title">劳务、外业成本</div>
      <el-form-item
        label="协作人"
        prop="collaborator"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.collaborator"
        />
      </el-form-item>
      <el-form-item
        label="类型"
        prop="collaborationType"
        style="width: 48%; display: inline-block;"
      >
        <el-select v-model="form.collaborationType" filterable clearable style="width: 100%;">
          <el-option v-for="item in dict.collaborationType" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="金额"
        prop="collaborationAmount"
        style="width: 48%; display: inline-block;"
      >
        <el-input-number
          v-model="form.collaborationAmount"
          :precision="2"
          :min="0"
          style="width: 66%;"
        />
      </el-form-item>
      <div class="content-title">业务</div>
      <el-form-item
        label="业务员"
        prop="businessOperator"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.businessOperator"
        />
      </el-form-item>
      <el-form-item
        label="业务费比例"
        prop="businessAmountRatio"
        style="width: 48%; display: inline-block;"
      >
        <el-input
          v-model="form.businessAmountRatio"
        />
      </el-form-item>
      <el-form-item
        label="说明"
        prop="businessDesc"
        style="width: 96%;"
      >
        <el-input
          v-model="form.businessDesc"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="text"
        @click="crud.cancelCU"
      >
        取消
      </el-button>
      <el-button
        :loading="crud.status.cu === 2"
        type="primary"
        @click="crud.submitCU"
      >
        确认
      </el-button>
      <el-button
        v-if="crud.status.add !== 0"
        type="primary"
        @click="crud.tempSubmitCU"
      >
        暂时保存并退出
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { form } from '@crud/crud'

const defaultForm = {
  id: null
}
export default {
  mixins: [form(defaultForm)],
  props: {
    dict: {
      type: Object,
      required: true
    },
    isArchivedOptions: {
      type: Array,
      required: true
    },
    invoiceStatusOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      rules: {
        contractCode: [
          { required: true, message: '请输入合同编号', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
  ::v-deep .el-dialog .el-dialog__title {
    font-weight: bold;
    font-size: 20px;
  }
</style>
